import React from 'react';
import PropTypes from 'prop-types';
import { ENUM } from 'utils/constants';
import { Table, Pagination, Balloon } from '@teamix/ui';
import utils from 'utils';
import './index.scss';
import intl from '../../../../../locale';

const prefix = 'upgrade-result-table';
const visiblityLevelObj = {
  0: intl.get({
    id: 'code-assets.components.table.PrivateVisibleOnlyToMembers',
    defaultMessage: '私有(仅代码库成员可见)',
  }),
  10: intl.get({
    id: 'code-assets.components.table.VisibleToEnterpriseAccessibleTo',
    defaultMessage: '企业可见(企业内成员可访问)',
  }),
};

export default class ProgressTable extends React.PureComponent {
  static propTypes = {
    onPageChange: PropTypes.func,
  };

  static defaultProps = {
    onPageChange: () => {},
  };

  renderImportRepoName = (value) => {
    const trigger = <div className="table-cell-one-line">{value}</div>;

    return (
      <Balloon.Tooltip trigger={trigger} align="t">
        {value}
      </Balloon.Tooltip>
    );
  };

  renderOriginalVisibilityLevel = (value) => {
    return <div>{ENUM.visibility_level_text[value]}</div>;
  };

  renderNewImportName = (value, index, record) => {
    const trigger = (
      <div className="table-cell-one-line" style={{ color: '#1B86EA' }}>
        <a href={record.target_project_url} target="_blank" rel="noreferrer">
          {value}
        </a>
      </div>
    );

    return (
      <Balloon.Tooltip trigger={trigger} align="t">
        {value}
      </Balloon.Tooltip>
    );
  };

  renderMessage = (value, index, record) => {
    const { status } = record;
    const msg = value && typeof value === 'string' ? JSON.parse(value) : value;
    const {
      errorMessages = [],
      migrateUserFailMesages = [],
      migrateWebhookFailMessages = [],
      migrateWikiFailMessages = [],
    } = msg || {};

    let arr = [];
    if (status === 'SUCCESS') {
      arr = [...migrateUserFailMesages, ...migrateWebhookFailMessages, ...migrateWikiFailMessages];
    }
    if (status === 'UNKNOWN_FAILED') {
      arr = errorMessages;
    }
    const cellTexts = arr.map((item) => {
      return item;
    });
    const tipTexts = arr.map((item) => {
      return <div>{item}</div>;
    });
    const trigger = <div className="table-cell-one-line">{cellTexts}</div>;
    return (
      <Balloon.Tooltip trigger={trigger} align="t">
        <div>{tipTexts}</div>
      </Balloon.Tooltip>
    );
  };

  renderTargetVisibilityLevel = (value) => {
    return <div className="table-cell-one-line">{visiblityLevelObj[value]}</div>;
  };

  renderOrg = (value) => {
    const trigger = <div className="table-cell-one-line">{value}</div>;
    return (
      <Balloon.Tooltip trigger={trigger} align="t">
        {value}
      </Balloon.Tooltip>
    );
  };

  renderTime = (value) => {
    const trigger = <div className="table-cell-one-line">{utils.getBeautyTime(value)}</div>;
    return (
      <Balloon.Tooltip trigger={trigger} align="t">
        {utils.getBeautyTime(value)}
      </Balloon.Tooltip>
    );
  };

  renderTable = () => {
    const { isLoadingTable, dataType, list } = this.props;
    if (dataType === 'fail') {
      return (
        <Table loading={isLoadingTable} primaryKey="original_project_id" dataSource={list}>
          <Table.Column
            title={intl.get({ id: 'code-assets.components.table.Project', defaultMessage: '项目' })}
            dataIndex="original_repo_path"
            className="import-repo-name-col"
            cell={this.renderImportRepoName}
          />
          <Table.Column
            title={intl.get({
              id: 'code-assets.components.table.CauseOfFailure',
              defaultMessage: '失败原因',
            })}
            dataIndex="message"
            className="fail-messge-col"
            cell={this.renderMessage}
          />
        </Table>
      );
    }
    if (dataType === 'success') {
      return (
        <Table loading={isLoadingTable} primaryKey="original_project_id" dataSource={list}>
          <Table.Column
            title={intl.get({ id: 'code-assets.components.table.Project', defaultMessage: '项目' })}
            dataIndex="original_repo_path"
            className="import-repo-name-col"
            cell={this.renderImportRepoName}
          />
          <Table.Column
            title={intl.get({
              id: 'code-assets.components.table.Openness',
              defaultMessage: '公开性',
            })}
            dataIndex="original_visibility_level"
            className="import-repo-visibility-col"
            cell={this.renderOriginalVisibilityLevel}
          />
          <Table.Column
            title={intl.get({
              id: 'code-assets.components.table.UpgradeHouKuName',
              defaultMessage: '升级后库名',
            })}
            dataIndex="target_repo_path"
            className="target-repo-name-col"
            cell={this.renderNewImportName}
          />
          <Table.Column
            title={intl.get({
              id: 'code-assets.components.table.PostUpgradePublicity',
              defaultMessage: '升级后公开性',
            })}
            dataIndex="target_visibility_level"
            className="target-repo-visibility-col"
            cell={this.renderTargetVisibilityLevel}
          />
          <Table.Column
            title={intl.get({
              id: 'code-assets.components.table.UpgradeReminder',
              defaultMessage: '升级提醒',
            })}
            dataIndex="message"
            className="success-message-col"
            cell={this.renderMessage}
          />
        </Table>
      );
    }

    if (dataType === 'record') {
      return (
        <Table loading={isLoadingTable} primaryKey="original_project_id" dataSource={list}>
          <Table.Column
            title={intl.get({ id: 'code-assets.components.table.Project', defaultMessage: '项目' })}
            dataIndex="original_repo_path"
            className="import-repo-name-col"
            cell={this.renderImportRepoName}
          />
          <Table.Column
            title={intl.get({
              id: 'code-assets.components.table.Openness',
              defaultMessage: '公开性',
            })}
            dataIndex="original_visibility_level"
            className="import-repo-visibility-col"
            cell={this.renderOriginalVisibilityLevel}
          />
          <Table.Column
            title={intl.get({
              id: 'code-assets.components.table.UpgradeHouKuName',
              defaultMessage: '升级后库名',
            })}
            dataIndex="target_repo_path"
            className="target-repo-name-col"
            cell={this.renderNewImportName}
          />
          <Table.Column
            title={intl.get({
              id: 'code-assets.components.table.PostUpgradePublicity',
              defaultMessage: '升级后公开性',
            })}
            dataIndex="target_visibility_level"
            className="target-repo-visibility-col"
            cell={this.renderTargetVisibilityLevel}
          />
          <Table.Column
            title={intl.get({
              id: 'code-assets.components.table.UpgradeReminder',
              defaultMessage: '升级提醒',
            })}
            dataIndex="message"
            className="success-message-col"
            cell={this.renderMessage}
          />
          <Table.Column
            title={intl.get({
              id: 'code-assets.components.table.TargetEnterprise',
              defaultMessage: '目标企业',
            })}
            dataIndex="belong_to_organization_name"
            className="target-org-col"
            cell={this.renderOrg}
          />
          <Table.Column
            title={intl.get({
              id: 'code-assets.components.table.CompletionTime',
              defaultMessage: '完成时间',
            })}
            dataIndex="gmt_create"
            className="gmt-create-col"
            cell={this.renderTime}
          />
        </Table>
      );
    }
    return null;
  };

  render() {
    const { tablePagination, onPageChange } = this.props;
    const { total, currentPage, pageSize } = tablePagination;
    return (
      <div className={`${prefix}`}>
        <div className={`${prefix}-content`}>{this.renderTable()}</div>
        <div className={`${prefix}-pagination`}>
          <Pagination
            onChange={onPageChange}
            current={currentPage}
            total={total}
            showJump={false}
            pageSize={pageSize}
            pageSizeSelector={false}
            hideOnlyOnePage
          />
        </div>
      </div>
    );
  }
}
